<body>
  <div id="app"></div>
</body>

<script type="module">
  //   模拟代码：渲染器
  function createRenderer() {
    function render(vnode, container) {
      //渲染动
      if (vnode) {
        // 有新vnode，把新旧的一起传递patch函数，进行补丁
        patch(container._vnode, vnode, container)
      } else {
        // 没有新的vnode，但有旧的，是要执行卸载（unmount）
        if (container._vnode) {
          container.innerHTML = ''
        }
      }
      container._vnode = vnode //把 vnode 存储到container._vnode 下，即后续渲染中的旧 vnode
    }
    // ...
    function hydrate(vnode, container) {} //...服务端渲染
    return {render, hydrate}
  }
  //   有了渲染器就可以渲染执行渲染任务

  const renderer = createRenderer()
  //   首次渲染
  render.render(oldVnode, document.querySelector('#app'))
  //   更新渲染
  render.render(newVnode, document.querySelector('#app'))
  //   卸载容器
  render.render(null, document.querySelector('#app'))
  //   patch 函数是整个渲染器的核心人口
  /*
  第一个参数 n1: 旧的 vnode
  第二个参数 n2: 新的 vnode
  第三个参数 container:容器
  */
  function patch(n1, n2, container) {}
</script>
